<script setup name="home">
import OAMain from '@/components/OAMain.vue';
import homeHttp from '@/api/homeHttp';
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';
import timeFormat from '@/utils/timeFormat';


const name_list = ref([])
const num_list = ref([])
const new_inform = ref([])
const new_absent = ref([])

onMounted(async () => {

    try {
        let absent = await homeHttp.getLatestAbsents()
        let informs = await homeHttp.getLatestInforms()
        let res = await homeHttp.getDepartmentStaffCount()
        name_list.value = res.map(item => item.name);
        num_list.value = res.map(item => item.staff_count)
        new_inform.value = informs
        new_absent.value = absent
    } catch (detail) {
        ElMessage.error(detail)
    }

    var myChart = echarts.init(document.getElementById('department_staff_count'));
    // 绘制图表
    myChart.setOption({
        tooltip: {},
        interval: 1,
        xAxis: {
            data: name_list.value
        },
        yAxis: {},
        series: [
            {
                name: '人',
                type: 'bar',
                data: num_list.value
            }
        ]
    });
})
</script>

<template>
    <OAMain title="首页">
        <el-card class="title_card">
            <template #header>
                <h2>部门员工数据</h2>
            </template>
            <div id="department_staff_count" type="value" style="width: 100%; height: 300px;"></div>
        </el-card>
        <el-row :gutter="10" class="main_card">
            <el-col :span="12">
                <el-card class="card_left">
                    <template #header>
                        <h3>最新通知</h3>
                    </template>
                    <template #default>
                        <el-table :data="new_inform" >
                            <el-table-column prop="title" label="标题">
                                <template #default="scope">
                                    <RouterLink :to="{ name: 'inform_detail', params: { pk: scope.row.id } }">{{
                                        scope.row.title }}
                                    </RouterLink>
                                </template>
                            </el-table-column>
                            <el-table-column prop="author.realname" label="发布者" />
                            <el-table-column prop="create_time" label="发布时间" />
                            <el-table-column label="是否已读">
                                <template #default="scope">
                                    <el-button v-if="scope.row.reads.length != 0" type="success" plain>已读</el-button>
                                    <el-button v-else type="danger" plain>未读</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="card_right">
                    <template #header>
                        <h3>最新请假</h3>
                    </template>
                    <template #default>
                        <el-table :data="new_absent" >
                            <el-table-column prop="requester.department.name" label="部门"/>
                            <el-table-column prop="requester.realname" label="发起人" />
                            <el-table-column prop="start_date" label="起始日期" />
                            <el-table-column prop="end_date" label="结束日期"/>
                            <el-table-column label="发起时间">
                                <template #default="scope">
                                    {{ timeFormat.stringFromDateTime(scope.row.create_time) }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-card>
            </el-col>
        </el-row>
    </OAMain>
</template>

<style scoped>
.title_card{
    margin-top: 20px;
    border-radius: 12px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8);
    max-height: 400px;
}
.main_card {
  margin-top: 20px;
  border-radius: 12px;
}
:deep(.el-card) {
  border-radius: 12px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; */
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8);
  transition: box-shadow 0.3s;
  overflow: hidden; 
}
</style>